<template>
  <div style="margin-top:30px">
    <el-form ref="form" :rules="rules" :model="form" label-width="80px">
      <el-row>
        <el-col :span="12">
          <div class="grid-content bg-purple">
            <el-form-item label="客户编码" prop="customerCode" style="margin-right:15px">
              <el-input v-model="form.customerCode" placeholder="请输入客户编码"/>
            </el-form-item>
          </div>
        </el-col>
        <el-col :span="12">
          <div class="grid-content bg-purple">
            <el-form-item label="客户名称" prop="name" style="margin-right:15px">
              <el-input v-model="form.name" placeholder="请输入客户名称"/>
            </el-form-item>
          </div>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <div class="grid-content bg-purple">
            <el-form-item label="联系人" prop="contacts" style="margin-right:15px">
              <el-input v-model="form.contacts" placeholder="请输入联系人"/>
            </el-form-item>
          </div>
        </el-col>
        <el-col :span="12">
          <div class="grid-content bg-purple">
            <el-form-item label="手机号" prop="phone" style="margin-right:15px">
              <el-input v-model="form.phone" placeholder="请输入手机号"/>
            </el-form-item>
          </div>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <div class="grid-content bg-purple">
            <el-form-item label="信用代码" prop="businessLicenseImgNumber" style="margin-right:15px">
              <el-input v-model="form.businessLicenseImgNumber" placeholder="请输入信用代码"/>
            </el-form-item>
          </div>
        </el-col>
        <el-col :span="12">
          <div class="grid-content bg-purple">
            <el-form-item label="法人" prop="legalPerson" style="margin-right:15px">
              <el-input v-model="form.legalPerson" placeholder="请输入法人"/>
            </el-form-item>
          </div>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <div class="grid-content bg-purple">
            <el-form-item label="身份证号" prop="identificationNumber" style="margin-right:15px">
              <el-input v-model="form.identificationNumber" placeholder="请输入身份证号"/>
            </el-form-item>
          </div>
        </el-col>
        <el-col :span="12">
          <div class="grid-content bg-purple">
            <el-form-item label="税点(%)" prop="taxPoint" style="margin-right:15px">
              <el-input v-model="form.taxPoint" placeholder="请输入税点"/>
            </el-form-item>
          </div>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="24">

          <div class="grid-content bg-purple">
            <el-form-item label="所在区域" prop="areaList">
              <el-cascader
                v-model="form.areaList"
                 style="width:100%"
                :options="areaOptions"
                :props="{ value: 'countyCode', label: 'countyName', children: 'children' }"
              />
            </el-form-item>
          </div>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="24">
          <div class="grid-content bg-purple">
            <el-form-item label="是否结算" prop="isSettlement" style="margin-right:15px">
              <el-select v-model="form.isSettlement" placeholder="请选择是否结算" clearable style="width:100%">
              <el-option value="0" label="不结算" />
              <el-option value="1" label="结算"/>
              </el-select>
            </el-form-item>
          </div>
        </el-col>
      </el-row>

      <el-row>
        <el-col :span="24">
          <div class="grid-content bg-purple">
            <el-form-item label="地址" prop="address" style="margin-right:15px">
              <el-input v-model="form.address" placeholder="请输入地址"/>
            </el-form-item>
          </div>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="24">
          <div class="grid-content bg-purple">
            <el-form-item label="备注" prop="remark" style="margin-right:15px">
              <el-input v-model="form.remark" placeholder="请输入备注"/>
            </el-form-item>
          </div>
        </el-col>
      </el-row>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button type="primary" @click="funcSubmit">确 定</el-button>
    </div>
  </div>
</template>
<script>
  import Vue from 'vue'
  import 'xe-utils'
  import VXETable from 'vxe-table'
  import 'vxe-table/lib/index.css'
  import request from '@/utils/request'
  import { SelectArea } from "@/api/orderform";
import { mayDecimal,istenOrEighteen,isBetweenHundred} from "@/utils/validate4Form.js";

  Vue.use(VXETable)
  export default {
    name: 'customerAdd',
    data() {
      return {
        areaOptions: [],
        form: {
          areaList: [],
          customerCode: '',
          name: '',
          contacts: '',
          phone: '',
          businessLicenseImgNumber: '',
          legalPerson: '',
          identificationNumber: '',
          taxPoint: '',
          isSettlement:'',

          address: '',
          remark: '',
        },
        rules: {
          isSettlement: [
            {required: true, message: '请选择是否结算', trigger: 'blur'},
          ],

          customerCode: [
            {required: true, message: '请输入客户编码', trigger: 'blur'},
            {min: 1, max: 50, message: '长度在 1 到 50 个字符', trigger: 'blur'}
          ],
          name: [
            {required: true, message: '请输入客户名称', trigger: 'blur'},
            {min: 1, max: 50, message: '长度在 1 到 50 个字符', trigger: 'blur'}
          ],
          contacts: [
            {required: true, message: '请输入联系人', trigger: 'blur'},
            {min: 1, max: 50, message: '长度在 1 到 50 个字符', trigger: 'blur'}
          ],
            phone: [
                {required: true, message: '请输入手机号', trigger: 'blur'},
                {pattern: /^1[34578]\d{9}$/, message: '手机号格式有误！', trigger: 'blur'}

            ],
            taxPoint: [
          { required: false, message: "请输入税点", trigger: "blur" },
          { validator: isBetweenHundred, trigger: "blur" }

            ],
            identificationNumber:[
                {required: false, message: '请填写身份证号', trigger: 'blur' },
                {pattern: /(^[1-9]\d{5}(18|19|([23]\d))\d{2}((0[1-9])|(10|11|12))(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$)|(^[1-9]\d{5}\d{2}((0[1-9])|(10|11|12))(([0-2][1-9])|10|20|30|31)\d{2}$)/, message: '身份证号格式有误！', trigger: 'blur'}

            ]
        }
      }
    },
    created() {
      SelectArea().then(response => {
        this.areaOptions = response.data.records;
      });
    },
    methods: {
    // 重置
    reset(){
      this.$refs['form'].resetFields()
    },

      //提交
      funcSubmit() {
        this.$refs['form'].validate((valid) => {
          if (valid) {
            const data = this.form
            request({url: '/wms/customer', method: 'post',data}).then(response => {
              this.$message({message: response.msg, type: 'success'})
              this.$emit('fatherAddMethod')
            }).then(() => this.$refs['form'].resetFields())
          } else {
            return false;
          }
        });
      },
      //取消
      funcCancel() {
        this.$emit('fatherCancelMethod', 'add')
      }
    }
  }
</script>
<style lang="scss" scoped>
  .dialog-footer {
    margin: 15px 0 15px 0;
    width: 90px;
    float: right;
  }
</style>
